<template>
  <div>
    <!-- 头部 --> 
    <head-nev msg="黑马优购" :backState="true"></head-nev>
    <van-row>
    <!-- 粘性布局 -->
     <van-sticky :offset-top="0">
      <!-- 左侧 -->
      <van-col :span="6" class="leftNav">
        <div style="height:460px;">
            <!-- 滚动条 -->
          <happy-scroll color="rgba(0,0,0,0.2)" size="5" resize>
            <!-- 侧边导航栏(一级) -->
            <van-sidebar v-model="activeKey" >
              <van-sidebar-item
                v-for="item1 in cateList"
                :key="item1.cat_id"
                @click="sideClick(item1.children)"
                :title="item1.cat_name"
              />     
            </van-sidebar>
          </happy-scroll>
        </div>
      </van-col>
      </van-sticky>
      <!-- 右侧 -->
      <van-col :span="18" v-for="item2 in rightInfoList" :key="item2.cat_id" style="float:right">
        <!-- 商品分类(二级)文字 -->
        <van-row type="flex" justify="center" class="title_row">
          /
          <strong>{{item2.cat_name}}</strong>/
        </van-row>
        <!-- 商品分类(三级)图片 -->
        <van-row>
          <!-- 点击跳转 -->
          <van-grid :column-num="3">
            <van-grid-item
              v-for="item3 in item2.children"
              :key="item3.cat_id"
              :icon="item3.cat_icon"
              :text="item3.cat_name"
              van-lazy="item3.cat_icon"
              @click="jumpListPage(item3.cat_id,item3.cat_name , item3)"
            />
          </van-grid>
        </van-row>
      </van-col>
    </van-row>
        <!-- 底部 -->
    <foot-nav></foot-nav>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeKey: 0,
      cateList: [],
      rightInfoList: []
    };
  },
  created() {
    // 获取分类列表调用
    this.getCateList();
  },
  methods: {
    // 获取分类列表
    async getCateList() {
      const { data: res } = await this.$http.get("/categories");
      if (res.meta.status !== 200) {
        this.$message.warning("获取失败");
      }
      // console.log(res);
      this.cateList = res.message;
      // console.log(this.cateList);
      //页面一刷新显示右边分类页面
      this.rightInfoList = res.message[0].children;
    },
    // 侧边栏点击事件右侧展示数据
    sideClick(list) {
      this.rightInfoList = list;
      // console.log(this.rightInfoList);
    },

    //右侧宫格点击后跳转页面
    jumpListPage(id,cateName, item3) {
      // console.log(id);
      this.$router.push({ path: "goodsList", name: 'cateList', params: { id, cateName} }); 
    },
  
  }
};
</script>

<style scoped>
.van-col--6 {
  height: 100%;
}
.title_row {
  font-size: 16px;
  margin: 10px 0;
}
.leftNav{
  position: fixed ;
  top: 1.22667rem ; 
}
.happy-scroll{
height: 15.2rem
}
</style>
